<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link href="#{facesContext.externalContext.requestContextPath}/web-resources/css/default.css" rel="stylesheet" type="text/css"/>
        <title>
            <ui:insert name="titulo">
                <h:outputText value="titulo"/>
            </ui:insert>
        </title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <!-- ========================================================================================== -->
            <p:layoutUnit position="north" size="105" closable="false" collapsible="false" resizable="false">
                <h:form id="northForm" prependId="true">
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="33%" align="left">
                                            <p:graphicImage value="/web-resources/imagenes/logo.png" width="233" height="53"/>
                                        </td>
                                        <td width="34%" align="center">
                                            <p:ajaxStatus style="width: 48px; height: 48px;">
                                                <f:facet name="default">
                                                    <h:outputText value="&nbsp;"/>
                                                </f:facet>
                                                <f:facet name="start">
                                                    <p:graphicImage width="32" height="32" value="/web-resources/imagenes/108_1.gif"/>
                                                </f:facet>
                                                <f:facet name="complete">
                                                    <h:outputText value="&nbsp;"/>
                                                </f:facet>                            
                                            </p:ajaxStatus>
                                        </td>
                                        <td width="33%" align="right">
                                            <p:splitButton value="#{(SessionBean.usuario ne null) ? SessionBean.usuario.id : '[Cerrar sesi&oacute;n]'}" icon="ui-icon-unlocked" oncomplete="sesionDialog.show();" title="Cerrar sesi&oacute;n">
                                                <p:menuitem value="Informaci&oacute;n de #{SessionBean.usuario.id}" icon="ui-icon-contact" oncomplete="usuarioDialog.show();" rendered="#{SessionBean.usuario ne null}"/>
                                                <p:separator rendered="#{SessionBean.usuario ne null}"/>
                                                <p:menuitem value="Opciones" icon="ui-icon-gear" oncomplete="opcionesDialog.show();"/>
                                            </p:splitButton>
                                        </td>
                                    </tr>                        
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p:menubar model="#{SessionBean.menuBarModel}" autoDisplay="false" rendered="#{SessionBean.usuario ne null}"/>
                            </td>
                        </tr>
                    </table>
                    <!--/h:panelGrid-->
                </h:form>
            </p:layoutUnit>
            <!-- ========================================================================================== -->
            <p:layoutUnit position="west" size="230" collapsible="true" resizable="true" header="Acciones">
                <h:form id="westForm" prependId="true">
                    <p:panelMenu id="panelMenu">
                        <ui:insert name="acciones">
                            <p:submenu label="Prueba" icon="ui-icon-gear">
                            </p:submenu>
                        </ui:insert>
                    </p:panelMenu>
                </h:form>
            </p:layoutUnit>
            <!-- ========================================================================================== -->
            <p:layoutUnit position="center" collapsible="false" closable="false">
                <ui:insert name="titulo_contenido"/>
                <h:form id="centerForm" prependId="true">
                    <ui:insert name="contenido">
                        <h:outputText value="contenido"/>
                    </ui:insert>               
                </h:form>
            </p:layoutUnit>
            <!-- ========================================================================================== -->
            <p:layoutUnit position="south" size="24" closable="false" collapsible="false" resizable="false" style="text-align: center;">
                <h:form id="southForm" prependId="true">
                    <h:outputText value="&copy; 2013 - Infosgorup El Salvador"/>
                </h:form>
            </p:layoutUnit>
            <!-- ========================================================================================== -->
        </p:layout>
        <!-- ========================================================================================== -->
        <h:form id="extForm" prependId="true">
            <!-- ============================================== -->
            <p:dialog widgetVar="usuarioDialog" header="Informaci&oacute;n de #{SessionBean.usuario.id}" closable="true" resizable="false" modal="true" draggable="true" width="500" showEffect="fold" hideEffect="fold">
                <h:panelGrid columns="4">
                    <h:outputText value="Inicio de sesi&oacute;n" styleClass="texto_negrita"/>
                    <h:outputText value="#{SessionBean.fechaHoraInicioSesion}">
                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT-6"/>
                    </h:outputText>
                    <h:outputText/>
                    <h:outputText/>
                    <h:outputText value="Compa&ntilde;&iacute;a" styleClass="texto_negrita"/>
                    <h:outputText value="#{SessionBean.usuario.idCompania.nombre}"/>
                    <h:outputText value="Rol" styleClass="texto_negrita"/>
                    <h:outputText value="#{SessionBean.usuario.idRol.id}"/>
                    <f:facet name="footer">
                        <p:commandButton value="OK" icon="ui-icon-circle-check" immediate="true" oncomplete="usuarioDialog.hide();"/>
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
            <!-- ============================================== -->
            <p:dialog widgetVar="opcionesDialog" header="Opciones" closable="true" resizable="false" modal="true" draggable="true" width="400" showEffect="fold" hideEffect="fold">
                <h:panelGrid columns="2">
                    <h:outputText value="Tema"/>
                    <p:themeSwitcher style="width: 250px;" effect="slide">
                        <f:selectItem itemLabel="aristo" itemValue="aristo"/>
                        <f:selectItem itemLabel="afterdark" itemValue="afterdark"/>
                        <f:selectItem itemLabel="afternoon" itemValue="afternoon"/>
                        <f:selectItem itemLabel="afterwork" itemValue="afterwork"/>
                        <f:selectItem itemLabel="black-tie" itemValue="black-tie"/>
                        <f:selectItem itemLabel="blitzer" itemValue="blitzer"/>
                        <f:selectItem itemLabel="bluesky" itemValue="bluesky"/>
                        <f:selectItem itemLabel="bootstrap" itemValue="bootstrap"/>
                        <f:selectItem itemLabel="casablanca" itemValue="casablanca"/>
                        <f:selectItem itemLabel="cruze" itemValue="cruze"/>
                        <f:selectItem itemLabel="cupertino" itemValue="cupertino"/>
                        <f:selectItem itemLabel="dark-hive" itemValue="dark-hive"/>
                        <f:selectItem itemLabel="dot-luv" itemValue="dot-luv"/>
                        <f:selectItem itemLabel="eggplant" itemValue="eggplant"/>
                        <f:selectItem itemLabel="excite-bike" itemValue="excite-bike"/>
                        <f:selectItem itemLabel="flick" itemValue="flick"/>
                        <f:selectItem itemLabel="glass-x" itemValue="glass-x"/>
                        <f:selectItem itemLabel="home" itemValue="home"/>
                        <f:selectItem itemLabel="hot-sneaks" itemValue="hot-sneaks"/>
                        <f:selectItem itemLabel="humanity" itemValue="humanity"/>
                        <f:selectItem itemLabel="le-frog" itemValue="le-frog"/>
                        <f:selectItem itemLabel="midnight" itemValue="midnight"/>
                        <f:selectItem itemLabel="mint-choc" itemValue="mint-choc"/>
                        <f:selectItem itemLabel="overcast" itemValue="overcast"/>
                        <f:selectItem itemLabel="pepper-grinder" itemValue="pepper-grinder"/>
                        <f:selectItem itemLabel="redmond" itemValue="redmond"/>
                        <f:selectItem itemLabel="rocket" itemValue="rocket"/>
                        <f:selectItem itemLabel="sam" itemValue="sam"/>
                        <f:selectItem itemLabel="smoothness" itemValue="smoothness"/>
                        <f:selectItem itemLabel="south-street" itemValue="south-street"/>
                        <f:selectItem itemLabel="start" itemValue="start"/>
                        <f:selectItem itemLabel="sunny" itemValue="sunny"/>
                        <f:selectItem itemLabel="swanky-purse" itemValue="swanky-purse"/>
                        <f:selectItem itemLabel="trontastic" itemValue="trontastic"/>
                        <f:selectItem itemLabel="ui-darkness" itemValue="ui-darkness"/>
                        <f:selectItem itemLabel="ui-lightness" itemValue="ui-lightness"/>
                        <f:selectItem itemLabel="vader" itemValue="vader"/>
                    </p:themeSwitcher>
                    <f:facet name="footer">
                        <p:commandButton value="OK" icon="ui-icon-circle-check" oncomplete="opcionesDialog.hide();" immediate="true"/>                        
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
            <!-- ============================================== -->
            <p:dialog widgetVar="sesionDialog" header="Cerrar sesi&oacute;n #{(SessionBean.usuario ne null) ? SessionBean.usuario.id : ''}" closable="true" resizable="false" modal="true" draggable="true" width="400" showEffect="fold" hideEffect="fold">
                <h:panelGrid columns="2">
                    <p:graphicImage value="/web-resources/imagenes/64/dialog-question.png" width="64" height="64"/>
                    <h:outputText value="&iquest;Confirma que desea cerrar la sesi&oacute;n?"/>
                    <f:facet name="footer">
                        <p:commandButton value="S&iacute;, cerrar sesi&oacute;n" icon="ui-icon-locked" oncomplete="sesionDialog.hide();" action="#{login.cerrarSesion$action}" immediate="true"/>
                        <p:commandButton value="No" icon="ui-icon-circle-close" oncomplete="sesionDialog.hide();" rendered="#{SessionBean.usuario ne null}" immediate="true"/>
                    </f:facet>
                </h:panelGrid>
            </p:dialog>
            <!-- ============================================== -->
            <ui:insert name="dialogos">
                <h:outputText value="dialogos"/>
            </ui:insert>
            <p:growl autoUpdate="true" showDetail="true" showSummary="false"/> 
        </h:form>
        <!-- ========================================================================================== -->
    </h:body>
</html>